<template>
  <div class="relative">
    <div class="environment-header">
      <!-- <p class="title left color">升降机监控</p> -->
      <zz-back class="left" name="升降机监控" :title=departmentname style="padding: 0"></zz-back>
      <div class="head-right">
        <span class="mr10">项目</span>
        <zz-search
          class="inline mr20"
          :width="155"
          :searchTop="4"
          @searchClick="searchClick">
        </zz-search>
      </div>
    </div>
    <div class="top-right right">
      <button class="button-block mr20 " @click="isShowDialog('1')">无升降机设备的项目({{rate.noDeviceProjectNum}})</button>
      <button class="button-block mr20 " @click="isShowDialog('2')">今日升降机报警系统({{rate.alarmcount}})</button>
      <span class="mr10">排序</span>
      <zz-select
        class="inline mr10"
        style="width: 152px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList1"
        :all = false
        optionColor = "#939997"
        name = "监控比例"
        @optionClick="sortBy">
      </zz-select>
      <zz-select
        class="inline"
        style="width: 99px"
        :border= true
        :options="{width: '100%'}"
        :option="sortList2"
        :all = false
        optionColor = "#939997"
        name = "升序"
        @optionClick="changeSortFun">
      </zz-select>
    </div>
    <div class="info mr20">
      <div>升降机数量<span>{{rate.elevatorNum}}</span>台</div>
      <div>监控数量<span>{{rate.elevatorMonitorNum}}</span>台</div>
      <div>监控比例<span>{{rate.monitorPercent}}%</span></div>
      <div>监控在线率<span>{{rate.onlinePercent}}%</span></div>
    </div>
    <zz-table
      style="margin: 10px auto 0; width: 100%;"
      :title="title"
      :dataList = 'dataList'
      @handle="tableHandler">
    </zz-table>
    <zz-paginate pagingId="page1" class="right mr20"  :simple="false" :isTotalItem="false" :pageSize = pageSize v-if="dataList.length > 0" @choose="query" :padding="[0]"></zz-paginate>
    <div class="exportExcel ml20">
      <button class="mr10 button-block" @click="exportExcel()">导出Excel</button>
      <div>上述每小时统计一次，本次数据更新时间：<span v-if="updateTime">{{$moment(updateTime).format('HH:mm:ss')}}</span></div>
    </div>

     <zz-dialog
      :title = dialogTitle
      :visible = showDialog
      :showConfirm = false
      :reset = true
      :showFoot = "false"
      @close="close">
      <div class="dialog-box">
         <!-- 没有数据 -->
        <div v-if="todayDialogShow && showNoNum" style="width: 300px; height: 30px;text-align: center;">
          暂无数据
        </div>
        <!-- 今日报警弹窗 -->
        <div v-if = "todayDialogShow && !showNoNum" style="width: 400px; height: 350px; overflow: scroll;">
          <div ref="towerMonitorEchart" style="width: 100%; height: 100%"></div>
        </div>
        <!-- 无升降机设备项目的弹窗 -->
        <div v-if = "noTowerDialogShow" style="width: 800px; height: 520px; overflow: scroll;">
          <zz-table
            style="margin: 0 -20px 0"
            :title="dialogTableTitle"
            :dataList = 'detailDataList'>
          </zz-table>
          <zz-paginate pagingId="page2" class="right"  :simple="false" :isTotalItem="false" pageSize = 10 v-if="detailDataList.length > 0" @choose="detailQuery" :padding="[0]"></zz-paginate>
          <div class="exportExcel">
            <button class="mr10 button-block" @click="exportNoMonitorExcel()">导出Excel</button>
            <!-- <div>上述每小时统计一次，本次数据更新时间：<span>12:30:30</span></div> -->
          </div>
        </div>
      </div>
    </zz-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { getElevatorDeviceMonitor, getComElevatorByProject, getComTodayElevatorAlarm, noMonitorList } from '../../../service/api.js'
import pie from '../../../js/pie2.js'

export default {
    name: 'areavideomonitor',
    components: {
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    data () {
      return {
        rate: {
          elevatorNum: 0,
          elevatorMonitorNum: 0,
          monitorPercent: '0',
          onlinePercent: '0',
          noDeviceProjectNum: 0,
          alarmcount: 0
        },
        dataList: [],
        detailDataList: [],
        title: [
          {name: '区域名称', width: '10%', align: 'left'},
            {name: '项目名称', width: '12%', align: 'left'},
            {name: '升降机数量', width: '10%', align: 'left'},
            {name: '监控数量', width: '8%', align: 'left'},
            {name: '监控比例', width: '8%', align: 'left'},
            {name: '在线数量', width: '8%', align: 'left'},
            {name: '在线率', width: '8%', align: 'left'},
            {name: '今日报警', width: '8%', align: 'left'},
            {name: '平均有效工作时长(小时/日)', width: '20%', align: 'left'},
            {name: '操作', width: '9%', align: 'left'}
        ],
        showDialog: false,
        dialogTitle: '',
        noTowerDialogShow: false,
        todayDialogShow: false,
        totalWarn: null,
        totalWarnOption: null,
        totalWarnOptions: {
          data: [],
          color: ['#33cadb', '#60bbf2', '#48dba4', '#afe551', '#a3c3fe', '#cbf1f4', '#d4c054', '#d49054', '#54a8d4', '#546fd4', '#7e54d4', '#b154d4', '#5472d4'],
        },
        dialogTableTitle: [
          {name: '序号', width: '11%', align: 'left'},
          {name: '项目名称', width: '20%', align: 'left'},
          {name: '区域', width: '15%', align: 'left'},
          {name: '项目负责人', width: '22%', align: 'left'},
          {name: '上线智慧工地时间', width: '22%', align: 'left'}
        ],
        sortList1: {
          0: '监控比例',
          1: '在线率',
          3: '日均报警次数',
          2: '有效工作时间'
        },
        sortList2: {
          1: '降序',
          2: '升序'
        },
        searchKeyword: '',
        groupObject: 0,
        order: 0,
        page: 1,
        pageSize: 10,
        noAccessPage: 1,
        isExport: 0, // 1 导出
        path: '' ,
        areaId: '',
        departmentname: '',
        updateTime:'',
        showNoNum: false
      }
    },
    mounted () {
      this.areaId = this.$route.query.id
      this.departmentname = this.$route.query.name
      this.searchByProject()
      this.getOnlineList()
    },
    methods: {
      isShowDialog (type) {
        this.showDialog = true
        switch(type) {
          case '1':
          this.noTowerDialogShow = true
          this.dialogTitle = '无升降机设备的项目'
          this.getNoTowerDetailList()
          break
          case '2':
          this.todayDialogShow = true
          this.dialogTitle = '今日升降机报警——全集团'
          this.getTodayTower()
          break
        }
      },
      searchClick (item) {
        // 搜索项目
        this.searchKeyword = item
        this.searchByProject()
      },
      query () {
        // 获取对应页数据
        this.searchByProject()
      },
      detailQuery () {
        // 未接入视频弹层获取对应页数据
         this.getNoTowerDetailList()
      },
      sortBy (item) {
        // 修改排序方式
         this.groupObject = Number(item.key)
         this.searchByProject()
      },
      changeSortFun (item) {
        // 升降序修改
        this.order = Number(item.key)
        this.searchByProject()
      },
      // 查看升降机在线率统计
      getOnlineList () {
        getElevatorDeviceMonitor({
          coId: this.currentUser.coId,
          areaCode: this.areaId, //区域id
          mid: this.currentUser.mid
        }).then( res => {
          console.log(res)
          this.rate = {
          elevatorNum: res.data.deviceNum || 0,
          elevatorMonitorNum: res.data.monitorNum || 0,
          monitorPercent: res.data.monitorPercent || 0,
          onlinePercent: res.data.onlinePercent || 0,
          noDeviceProjectNum: res.data.noDeviceProjectNum || 0,
          alarmcount: res.data.alarmcount || 0
        }
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取项目级的视频监测数据
      searchByProject () {
        this.dataList = []
        let data = {
          'areaCode': this.areaId, //区域code
          'keywords': this.searchKeyword,
          'groupObject': this.groupObject,
          'order': this.order,
          // 'page': this.page,
        }
        this.$axios({
            method: 'post',
            url: `${Vue.prototype.$site.videoServer}/api/elevator/getComElevatorByProject`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page1',
          }).then(res => {
            console.log(res)
            this.dataList = res.data.data.dataList
            if (res.data.data.dataList && res.data.data.dataList.length > 0) {
              this.updateTime = res.data.data.dataList[0].updateTime
            }
            this.dataList = this.dataList.map(item => {
              return {
                areaName: item.areaName,
                projectName: item.projectName,
                deviceNum: {customize: `<div style='text-align:right'>${item.deviceNum && item.deviceNum != 0 ? item.deviceNum : '--' }</div>`},
                monitorNum:  {customize: `<div style='text-align:right'>${item.monitorNum && item.monitorNum != 0 ? item.monitorNum : '--'}</div>`},
                monitorPercent: {customize: `<div style='text-align:right'>${item.monitorPercent && item.monitorPercent != 0 ? item.monitorPercent : '--' }</div>`},
                onlineNum: {customize: `<div style='text-align:right'>${item.onlineNum && item.onlineNum != 0 ? item.onlineNum : '--' }</div>`},
                onlinePercent:  {customize: `<div style='text-align:right'>${item.onlinePercent && item.onlinePercent != 0 ? item.onlinePercent : '--'}</div>`},
                todayAlarm:  {customize: `<div style='text-align:right'>${item.alarmcount && item.alarmcount != 0 ? item.alarmcount : '--'}</div>`},
                avrWorktime:  {customize: `<div style='text-align:right'>${item.avrWorktime && item.avrWorktime != 0 ? item.avrWorktime : '--'}</div>`},
                handle: [{name: '查看详情', type: 'detail', data: item}]
              }
            })
          })
        // 按项目查询
      },
      // 今日报警
      getTodayTower () {
        getComTodayElevatorAlarm({
          coId: this.currentUser.coId,
          areaCode: this.areaId // 区域id
        }).then(res => {
          this.totalWarnNum = res.data.alarmcount
          if (this.totalWarnNum === 0) {
            this.showNoNum = true
            return
          }
          this.totalWarnOptions.data = [
            {name: '超重', value: res.data.overweightcount,label: {show:true}, labelLine: {show: true} },
            {name: '人数', value: res.data.peoplecount,label: {show:true}, labelLine: {show: true} },
            {name: '限位', value: res.data.limitlocationcount,label: {show:true}, labelLine: {show: true} },
            {name: '限行区', value: res.data.limitareacount,label: {show:true}, labelLine: {show: true} },
            {name: '倾斜', value: res.data.anglecount,label: {show:true}, labelLine: {show: true} }
          ]
          for (let i = 0; i < this.totalWarnOptions.data.length; i++) {
            if (this.totalWarnOptions.data[i].value == 0) {
              this.totalWarnOptions.data[i].labelLine.show = false
              this.totalWarnOptions.data[i].label.show = false
            }
          }
          this.totalWarnOptions.allAlarm =  res.data.alarmcount || 0
          this.$nextTick(() => {
            this.totalWarnOption = pie(this.totalWarnOptions)
            this.totalWarn = this.$Echarts.init(this.$refs.towerMonitorEchart)
            this.totalWarn.setOption(this.totalWarnOption)
          })
        }).catch( err => {
          console.log(err)
        })
      },
      // 获取无升降机项目的列表
      getNoTowerDetailList () {
        let data = {
          'coId': this.currentUser.coId,
          'areaCode': this.areaId,
          'mid': this.currentUser.mid,
          // 'page': this.noAccessPage,
          'pageSize': this.pageSize
        }
        this.$axios({
            method: 'post',
            url: `${Vue.prototype.$site.videoServer}/api/elevator/getNoElevatorProject`,
            data: this.$qs.stringify(data, {indices: false}),
            paginate: true,
            paginId: 'page2',
          }).then(res => {
            if (res.data.data && res.data.data.dataList) {
              this.defaultNum = 1
              this.noAccessPage = res.data.data.pageNum
              this.detailDataList = res.data.data.dataList
              this.detailDataList = this.detailDataList.map(item => {
                return {
                  num: (this.noAccessPage - 1) * 10 + this.defaultNum++,
                  projectTitle: item.projectTitle,
                  departmentName: item.departmentName || '--',
                  memberName: item.memberName || '--',
                  onlineDay: {customize: `<span class='left'>${this.$moment(item.longGmtCreate).format('YYYY-MM-DD')}</span><span class='right'>已${item.onlineDay}天</span>`}
                }
              })
           } else {
             this.detailDataList = []
           }
          })
      },
      // 查看详情
      tableHandler (data) {
        //console.log(data)
        this.gopage('/liftMonitor/projectElevator', data.data.projectId, data.data.projectName)
      },
      // 跳转页面
      gopage (url, idnum, pname) {
        this.$router.push({ path: url, query: { id: idnum, name: pname }})
      },
      getInfoByProjectQuery () {
        return {
          coId: this.currentUser.coId,  // 企业id
          mId: this.currentUser.mid,  // 登录人id
          areaCode: this.areaId, // 区域编码
          keywords: this.searchKeyword,
          groupObject: this.groupObject,
          order: this.order
        }
      },
      getNoMonitorListQuery () {
        return {
          coId: this.currentUser.coId, // 企业id
          mid: this.currentUser.mid,// 登录人id
          areaCode: this.areaId // 区域编码
        }
      },
      exportExcel () {
        this.$export(`${this.$site.videoServer}/api/elevator/getComElevatorByProjectExport`, this.getInfoByProjectQuery())
      },
      exportNoMonitorExcel () {
        this.$export(`${this.$site.videoServer}/api/elevator/getNoElevatorProjectExport`, this.getNoMonitorListQuery())
      },
      close () {
        this.showDialog = false
        this.noTowerDialogShow = false
        this.todayDialogShow = false
      }
    }
}
</script>
<style lang="scss" scoped>
.environment-header{
    height: 60px;
    line-height: 30px;
    padding: 15px 20px 17px 20px;
    box-sizing: border-box;
    border-bottom: 1px $color-line solid;
    position: relative;
    .head-right {
      position: absolute;
      right: 20px;
      z-index: 6;
    }
  }
  .top-right {
    padding: 20px 20px 10px 20px;
    z-index: 6;
    span {
      line-height: 30px;
    }
  }
  .info {
    padding: 20px 20px 0 20px;
    height: 30px;
    line-height: 30px;
    >div {
      font-size: 14px;
      color: #363c3c;
      display: inline-block;
      span {
        color: #22a6b5;
        font-weight: bold;
        display: inline-block;
        padding: 0 5px;
      }
    }
    >div:last-child {
      span {
        padding: 0 0 0 10px;
      }
    }
  }
  .exportExcel {
    div {
      line-height: 30px;
      display: inline-block;
      color: #939997;
    }
  }
</style>

